<template>
    <view class="show-user-information-area u-margin-30 u-margin-top-50 u-border-radius-10 u-padding-30">
        <view v-if="canShowBlackButton" class="masking-button-area" @click="$u.throttle(handleBlackUser, 700)">
            <u-icon name="account-fill" color="#FFFFFF" size="24" label="拉黑" label-size="22" label-color="#FFFFFF"></u-icon>
        </view>
        <view class="u-flex u-margin-bottom-40">
            <u-avatar :src="businessCardInformation.avatar" :size="94"></u-avatar>
            <view class="u-margin-left-20">
                <text class="xxl u-font-weight-500 pangmenzhengdao-font">{{ businessCardInformation.name || '' }}</text>
                <view class="nr u-color-666666 u-margin-top-5 deyihei-font">{{ businessCardInformation.tel || '待完善' }}</view>
            </view>
        </view>
        <view class="u-margin-top-40 u-flex-col u-color-333333 pangmenzhengdao-font">
            <u-icon :label="`公司: ${businessCardInformation.company_name || '待完善'}`" 
                label-size="28" 
                size="30"
                name="https://resource.lanbaozixun.com/uploads/images/202410091145252bd5e4474.png">
            </u-icon>
            <u-icon :label="`地址: ${businessCardInformation.company_site || '待完善'}`" 
                label-size="28" 
                size="30"
                name="https://resource.lanbaozixun.com/uploads/images/202410091145255225b0246.png"
                class="u-margin-top-15">
            </u-icon>
        </view>
    </view>
</template>

<script>
import { blackUser } from '@/yixu/api/network_square'

export default {
    props: {
        userInfo: {
            type: Object,
            default: () => ({})
        },
        businessCardInformation: {
            default: () => ({})
        },
    },
    computed: {
        canShowBlackButton() {
            return this.userInfo.id !== this.businessCardInformation.user_id
        }
    },
    methods: {
        showToast(title, icon = 'none') {
            uni.showToast({
                title,
                icon
            })
        },
        async handleBlackUser() {
            const { user_id } = this.businessCardInformation
            
            if (!user_id) {
                this.showToast('用户ID不存在')
                return
            }
            
            if (this.userInfo.id === user_id) {
                this.showToast('用户参数异常')
                return
            }

            try {
                const res = await blackUser({
                    quilt_id: user_id
                })

                this.showToast(res.code === 1 ? '拉黑成功' : (res.msg || '拉黑失败'))

                if (res.code === 1) {
                    this.$emit('on-black-success')
                }
            } catch (e) {
                console.error('拉黑用户失败:', e)
                this.showToast('拉黑失败,请稍后重试')
            }
        }
    }
}
</script>

<style lang="scss" scoped>
	.show-user-information-area {
		position: relative;
		background: url('https://resource.lanbaozixun.com/uploads/images/20241007224752ea8292514.png') no-repeat 100%;

		.masking-button-area {
			top: 0;
			right: 0;
			padding: 2rpx 10rpx;
			position: absolute;
			background: #82848a;
			border-radius: 0 10rpx 0 10rpx;
			cursor: pointer;
		}
	}
</style>